<?php
// -----------------------------------------------------------------------------
// include
// -----------------------------------------------------------------------------

include "../config/config.php";
include "../auth.php";

// -----------------------------------------------------------------------------
// 访问设置
// -----------------------------------------------------------------------------

if (!isset($_POST["keyword"])) {
    exit("需要传入有效的参数！");
}

$keyword = $_POST["keyword"];

// -----------------------------------------------------------------------------
?>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>搜索结果</title>
    <link rel="stylesheet" href="../resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
    <base target="_self">
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<script src="../resources/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
<script src="../resources/jQuery/jquery-3.5.1.js"></script>
<?php include "../globalNavbar.php"; ?>

<!-- ----------------------------------------------------------------------- -->

<!-- div container start -->
<div class="container container-fluid mt-3 mb-5">

    <!-- 导航栏 开始 -->
    <div class="mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a class="text-decoration-none" href="<?php echo $homepage; ?>">首页</a>
                </li>
                <li class="breadcrumb-item active">
                    <a class="text-decoration-none" href="index.php">搜索</a>
                </li>
                <li class="breadcrumb-item active">搜索结果 - <span class="text-danger"><?php echo $keyword; ?></span></li>
            </ol>
        </nav>
    </div>
    <!-- 导航栏 结束 -->

    <div class="mt-2">
        <select id="selectSearchArea" class="form-select">
            <option value="url" selected>链接</option>
            <option value="title">标题</option>
            <option value="description">描述</option>
        </select>
    </div>

    <div class="mt-2" id="list"></div>

</div>
<!-- div container end -->

<!-- ----------------------------------------------------------------------- -->

<!--函数定义-->
<script>

    function search(keyword, searchArea) {
        var url = `listOfResultsGenerator.php?searchArea=${searchArea}&keyword=${keyword}`
        $.get(url)
            .done(function(data ) {
                $("#list").html(data)
            })
            .fail(function () {
                alert("获取搜索结果列表失败。")
            });
    }

</script>

<!-- ----------------------------------------------------------------------- -->

<!--网页加载时执行-->
<script>

    var keyword = "<?php echo $keyword; ?>"
    // 获取「此前指定过的搜索区域」
    var searchArea = localStorage.getItem("searchArea")

    $(function() {

        if (searchArea == null) {
            // 此前没有指定过搜索区域，默认搜索区域为「链接」
            searchArea = "url"
            localStorage.setItem("searchArea", searchArea)

            // 变更「下拉框的当前选中项」
            $("#selectSearchArea").val(searchArea)
        } else {
            // 此前已经指定过搜索区域，在该搜索区域中搜索
            searchArea = localStorage.getItem("searchArea")

            // 变更「下拉框的当前选中项」
            $("#selectSearchArea").val(searchArea)
        }

        search(keyword, searchArea)

    })

</script>

<!-- ----------------------------------------------------------------------- -->

<!--事件处理-->
<script>

    // 切换搜索区域时执行
    $("#selectSearchArea").on("change", function () {
        searchArea = this.value
        search(keyword, searchArea)
        // 记录已经选择的搜索区域，以便从其他页面返回当前页面时，自动搜索已经选中的搜索区域
        localStorage.setItem("searchArea", searchArea)
    })

</script>

<!-- ----------------------------------------------------------------------- -->

<!-- 添加「返回顶部按钮」 -->
<script src="../resources/vanilla-back-to-top/index.js"></script>
<script src="../resources/vanilla-back-to-top/config.js"></script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>
